let isDragging = false;
let startX, startWidthLeft, previewLeftPane;

document.querySelector(".splitter").addEventListener("mousedown", function (e) {
  isDragging = true;
  startX = e.clientX;
  previewLeftPane = document.querySelector(".preview-left-pane");
  startWidthLeft = parseFloat(getComputedStyle(previewLeftPane).width);

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
});

function onMouseMove(e) {
  if (!isDragging) return;
  const newWidthLeft = Math.max(200, startWidthLeft + (e.clientX - startX)); // 保持最小宽度
  const newWidthRight = 100 - newWidthLeft; // 假设总宽度为100%

  previewLeftPane.style.width = `${newWidthLeft}%`;
  document.querySelector(
    ".preview-right-pane"
  ).style.width = `${newWidthRight}%`;

  // 保持分隔条在鼠标下方
  this.style.left = `${e.clientX - this.offsetWidth / 2}px`;
}

function onMouseUp() {
  isDragging = false;
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);

  // 应用最终尺寸到实际子容器
  const finalWidthLeft = parseFloat(getComputedStyle(previewLeftPane).width);
  document.querySelector(".real-left-pane").style.width = `${finalWidthLeft}%`;
  document.querySelector(
    ".real-right-pane"
  ).style.width = `calc(100% - ${finalWidthLeft}%)`;
}
